<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button id="test">location='#'</button>
    <script>
        // hash模式:通过url里的#来进行页面处理，例如渲染或者跳转，不会刷新当前页面
        // hash也称作锚点，本身是用来做页面定位的，他可以使对应的id元素显示在可视区域内。
        // ，所以
        // 1.我们需要监听hash的改变
        // 2.自己封装方法获取路径和参数（因为location.search里的参数没有了）
        // 3.

          //监听hash变化：
        window.addEventListener('hashchange',function(){
            // 触发条件：
            // 1.url里面hash变化了
            // 2.点击浏览器的前进后退会触发
            console.log('hash变了',window.location.hash)
        })

        // 默认是空字符串
        console.log( window.location.hash);// 默认为空
        // 在url上面添加#qq
        // window.location.hash='qq' // 不会刷新页面，也不会触发hashchang事件
         //获取hash
         //console.log( window.location.hash);// #qq
        // window.location.hash='bb' // 不会刷新页面，也不会触发hashchang事件
        const ele_test=document.querySelector('#test');
        ele_test.onclick=function(){
            window.location='#hha' // 不会刷新页面
        }
       
       
        


       
       
    </script>
</body>
</html>